<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :option="option"
      :table-loading="loading"
      v-model:defaults="defaults"
      :data="data"
      v-model="form"
      v-model:page="page"
      :permission="permissionList"
      :before-open="beforeOpen"
      :before-close="beforeClose"
      @row-save="rowSave"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-click="handleRowClick"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <!-- 左边按钮  v-if="permission.dict_delete"-->
      <template #menu-left>
        <el-button type="danger" icon="el-icon-delete" plain @click="handleDelete"
          >删 除
        </el-button>
      </template>
      <!-- 右边按钮 -->
      <template #menu="scope">
        <el-button
          type="primary"
          text
          icon="el-icon-setting"
          @click.stop="handleRowClick(scope.row)"
          >自定义
        </el-button>
      </template>
      <!-- 自定义表单列 -->
      <template #bind-form="{}">
        <div>我是自定义</div>
        <el-button type="primary" @click="changeDeepValue">改变value值</el-button>
      </template>
      <!-- 列内 -->
      <template #code="{ row }">
        <el-tag @click="handleRowClick(row)" style="cursor: pointer">{{ row.code }}</el-tag>
      </template>
      <template #isSealed="{ row }">
        <el-tag>{{ row.isSealed === 0 ? '否' : '是' }}</el-tag>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script setup>
import { getList, getDetail, add, update, remove } from '@/api/system/post';
import { mapGetters, useStore } from 'vuex';
import website from '@/config/website';
import { ref, reactive, computed, getCurrentInstance, toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { findObject } from '@smallwei/avue';
let { proxy } = getCurrentInstance(); //获取this

// 勾选的同时会回调selectionChange方法返回当前选中的数据,toggleRowSelection方法设置行勾选,toggleAllSelection方法设置全部勾选
// hide和showColumn控制列显隐，display控制表单显隐
// 配置order的序号可以实现表单和表格字段不同的顺序
// #name-label="{}" 表单名称开启自定义 name===prop名称
// #name-form="{ type, disabled }" 表单自定义
// #name-error="{ error }" 表单自定义错误提示
// #name-header="{ column }" 表头自定义
// formRef.value.submit(); 表单提交
// formRef.value.resetForm(); 表单清空
// curd.value.resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
// filterDic设置为true返回的对象不会包含$前缀的字典翻译, filterNull设置为true返回的对象不会包含空数据的字段
// 打开表单会重新请求dicUrl
// v-model:defaults="defaults"  监听数据 和control方法作用差不多
// 解决vue3中的对象时为proxy对象，toRaw(xx), JSON.parse(JSON.stringify(xx))

const crud = ref(null); // crud的ref
const defaults = ref({});
let form = reactive({}); // 获得当前的form值
let selectionList = reactive([]); // 获取当前选中
let query = reactive({}); // 获取当前搜索的值
const loading = ref(false); // loading加载状态
const page = reactive({
  pageSize: 10,
  pageSizes: [10, 30, 50, 100, 200],
  currentPage: 1,
  total: 0,
}); // 分页
let data = reactive([]); // 页面数据
// 自定义验证表单
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入用户姓名'));
  } else {
    callback();
  }
};
// 页面配置相关
const option = reactive({
  height: 'auto', // 表格高度
  tip: true, // 多选提示是否展示
  border: true, // 边框
  align: 'center', // 是否居中
  menuAlign: 'center', // 按钮是否居中
  searchShow: true, // 首次加载是否显示搜索
  searchIcon: false, // 按钮是否折叠
  searchMenuSpan: 4, // 搜索按钮长度
  searchSpan: 6, // 搜索框长度, 最大长度24
  border: true, // 表格边框是否显示
  index: true, // 是否显示序号
  indexLabel: '序号', // 设置序号列的名称
  indexWidth: 60, // 设置序号列的宽度
  selection: true, // 全选框显示,是否可以多选
  reserveSelection: true, // 在数据更新之后保留之前选中的数据；
  dialogMenuPosition: 'right', // 弹窗框按钮的位置,left/center/right
  dialogDirection: 'rtl', // 表格弹窗打开方向：rtl/ltr/ttb/tbb
  // dialogType: 'drawer', // 弹框右边弹出
  loadingText: '数据加载中···',
  viewBtn: true, // 查看按钮
  column: [
    {
      label: '',
      prop: 'bind',
      span: 24,
      hide: true,
    },
    {
      label: '登录账号',
      prop: 'id',
      search: true,
      rules: [
        {
          validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入登录账号'));
            } else {
              callback();
            }
          },
          trigger: 'blur',
        },
      ],
    },
    // 上传系列
    {
      label: '产品图标',
      prop: 'productIco',
      type: 'upload',
      span: 24,
      drag: true, // 拖拽排序
      listType: 'picture-img', // 配置上传的类型: picture-card：多张，picture-img：一张，附件上传：picture
      multiple: true, // 是否多选上传
      showFileList: false, // 不展示上传的文件列表
      accept: 'image/png, image/jpeg, .xls,.xlsx', // 上传的类型
      limit: 2, // 最多传几张
      dataType: 'object', // 数据的类型：string/object
      fileType: 'img', // 文件的类型：img/video/audio
      // 如果接口需要传参
      data: {
        a: 1,
      },
      // 头部设置
      headers: {
        b: 1,
      },
      action: '/api/blade-resource/oss/endpoint/put-file',
      propsHttp: {
        name: 'name', //图片的名称
        url: 'link', // 路径地址
        res: 'data', // 返回数据层级结构
        home: '', // 相对路径的主路径
      },
      fileText: '我是上传按钮',
      loadText: '上传等待文案',
      tip: '只能上传jpg/png用户头像，且不超过500kb',
      // 图片水印
      canvasOption: {
        text: 'avue',
        ratio: 0.1,
      },
      // 图片裁剪
      cropperOption: {
        autoCropWidth: 100,
        autoCropHeight: 100,
        fixed: true,
        fixedNumber: [100, 100],
      },
      rules: [
        {
          required: true,
          message: '请选择产品图标',
          trigger: 'change',
        },
      ],
      change: () => {},
    },
    {
      label: '用户姓名',
      prop: 'dictValue',
      search: true,
      display: false, // 表单隐藏此条
      rules: [{ required: true, validator: validatePass, trigger: 'blur' }],
    },
    {
      label: '年龄',
      prop: 'isSealed',
      hide: true, // 此列隐藏
      rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    },
    {
      label: '性别',
      prop: 'status',
      overHidden: true, // 超出隐藏
      search: true, // 搜索
      slot: true, // 可自定义内容
      type: 'select', // radio，checkbox
      // dicUrl: `${baseUrl}/getProvince`,
      dicFlag: true, // 打开表单会重新请求dicUrl
      filterDic: true, // filterDic设置为true返回的对象不会包含$前缀的字典翻译  在option中使用
      filterNull: true, // filterNull设置为true返回的对象不会包含空数据的字段
      dicData: [
        {
          label: '启用',
          value: 1,
        },
        {
          label: '停用',
          value: 2,
        },
      ],
      // 通过radio控制哪些展示哪些隐藏
      control: (val, form) => {
        console.log('radio控制', val, form);
        // if (val === 1) {
        //   return {
        //     dictValue: {
        //       // 参数prop
        //       display: true,
        //       editDisabled: true,
        //     }
        //   };
        // } else if (val === 2) {
        //   return {
        //     dictValue: {
        //       display: false,
        //     }
        //   };
        // }
      },
    },
  ],
});
// 左边按钮方法
const handleDelete = () => {
  console.log('selectionList获取当前选中', JSON.parse(JSON.stringify(selectionList)));
  console.log('ids获取当前选中', getIds());
};
// 点击当前列
const handleRowClick = () => {};
// 新增数据处理
const rowSave = (row, done, loading) => {
  console.log('row', row);
  // 执行done关闭当前表单,loading用于添加失败后不关闭弹窗，重新提交
  const res = {
    ...row,
    dictKey: -1,
  };
  add(res).then(
    () => {
      onLoad(page); // 请求列表数据
      ElMessage.success('操作成功');
      done();
    },
    error => {
      window.console.log(error);
      loading();
    }
  );
};
// 编辑数据处理
const rowUpdate = (row, index, done, loading) => {
  update(row).then(
    () => {
      ElMessage.success('操作成功');
      onLoad(page); // 请求列表数据
      done();
    },
    error => {
      window.console.log(error);
      loading();
    }
  );
};
// 删除数据处理
const rowDel = (row, index) => {
  ElMessageBox.confirm('此操作将删除选择数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      return remove(row.id);
    })
    .then(() => {
      onLoad(page); // 请求列表数据
      ElMessage.success('操作成功');
    })
    .catch(() => {});
};
// 点击刷新按钮触发该事件(由于page分页信息和search搜索信息，可以直接通过this.page和this.search拿到)
const refreshChange = () => {
  onLoad(page, query); // 请求列表数据
};
// 打开弹窗前
const beforeOpen = (done, type, loading) => {
  if (['edit', 'view'].includes(type)) {
    getDetail(form.id).then(res => {
      form = res.data.data;
    });
  }
  done();
};
// 关闭弹窗前
const beforeClose = () => {};
// 清空搜索重新请求数据
const searchReset = () => {
  query = {};
  onLoad(page);
};
// 点击搜索后执行方法
const searchChange = (params, done) => {
  query = params;
  page.currentPage = 1;
  onLoad(page, params);
  done();
};
// 获取当前选中的数据
const selectionChange = list => {
  selectionList = list;
};
// 清空选中的数据
const selectionClear = () => {
  selectionList = [];
  crud.value.toggleSelection();
};
// 获取当前的分页
const currentChange = currentPage => {
  page.currentPage = currentPage;
};
// 获取当前的数量
const sizeChange = pageSize => {
  page.pageSize = pageSize;
};
// 请求列表数据
const onLoad = (page, params = {}) => {
  console.log('baga');
  loading.value = true;
  getList(page.currentPage, page.pageSize, Object.assign(params, query)).then(res => {
    const dataList = res.data.data;
    page.total = dataList.total;
    data = dataList.records;
    console.log('data', data);
    loading.value = false;
    selectionClear(); // 清空选中的数据
  });
};
// 改变某个值
const initData = () => {
  var column = findObject(option.column, 'status');
  console.log(column); //操作对象
  column.dicData = [
    {
      label: '男',
      value: 1,
    },
    {
      label: '女',
      value: 2,
    },
  ];
  console.log('column', column);
};
initData();
const state = useStore();
console.log('state----数据', state);
const userInfo = computed(() => state.getters.userInfo); // 获取userInfo
const permission = computed(() => state.getters.permission); // 获取permission
// 当前按钮的显示隐藏权限
const permissionList = computed(() => {
  return {
    addBtn: proxy.validData(permission.dict_add, true),
    delBtn: proxy.validData(permission.dict_delete, true),
    editBtn: proxy.validData(permission.dict_edit, true),
    viewBtn: proxy.validData(permission.dict_view, true),
  };
});
// 获取当前选择的数据id
const getIds = () => {
  let ids = [];
  const selectionLists = JSON.parse(JSON.stringify(selectionList));
  selectionLists.forEach(ele => {
    ids.push(ele.id);
  });
  return ids.join(',');
};
</script>
